<template>
	<d2-container>
		<template>
			<div class="form-area">
				<el-form ref="updateForm" :model="formData" :rules="rules" label-width="120px" style="height:auto">
					<div class="form-title"><h3>基本信息</h3></div>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="合作伙伴名称" prop="partnerName">
								<el-input type="text" v-model="formData.partnerName" placeholder="合作伙伴名称" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="合作伙伴编码" prop="partnerCode">
								<el-input type="text" v-model="formData.partnerCode" placeholder="合作伙伴编码" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
          <el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="联系人" prop="name">
								<el-input type="text" v-model="formData.name" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="联系电话" prop="name">
								<el-input type="text" v-model="formData.name" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="消费券商品名称" prop="productCouponId">
								<el-select v-model="formData.productCouponId" placeholder="请选择消费券商品" @change="selectProductCoupon()" style="width: 100%;">
									<el-option v-for="productCoupon in productCouponList" :key="productCoupon.id" :label="productCoupon.productName" :value="productCoupon.id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="消费券面额(元)" prop="couponAmount">
								<el-input type="text" v-model="formData.couponAmount" placeholder="消费券面额" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
          <el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="发放数量(张)" prop="grantNum">
								<el-input type="text" v-model.number="formData.grantNum" placeholder="请输入发放数量" ></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="备注" prop="remark">
								<el-input type="textarea" :rows="4" v-model="formData.remark" placeholder="请输入备注"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<div class="form-title"><h3>审核信息</h3></div>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="提交人" prop="submitor">
								<el-input type="text" v-model="formData.submitor" placeholder="提交人" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="提交时间" prop="submitTime">
								<el-date-picker v-model="formData.submitTime" type="datetime" placeholder="提交时间" readonly style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="审核人" prop="auditor">
								<el-input type="text" v-model="formData.auditor" placeholder="审核人" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="审核时间" prop="auditTime">
								<el-date-picker v-model="formData.auditTime" type="datetime" placeholder="审核时间" readonly style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="审核状态" prop="status">
								<el-input :value="formData.status == 1 ? '审核中' : formData.status == 2 ? '审核通过' : formData.status == 3 ? '审核未通过' : '未提交'" readonly></el-input>
							</el-form-item>
						</el-col>
            <el-col :span="12">
							<el-form-item label="交付状态" prop="deliverStatus">
								<el-input :value="formData.deliverStatus == 1 ? '已交付' : '未交付'" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="审核说明" prop="auditDesc">
								<el-input type="textarea" :rows="4" v-model="formData.auditDesc" placeholder="审核说明" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>

          <div class="form-title"><h3>系统信息</h3></div>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="创建时间" prop="createTime">
								<el-date-picker v-model="formData.createTime" type="datetime" placeholder="创建时间" readonly style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="创建人" prop="creator">
								<el-input type="text" v-model="formData.creator" placeholder="创建人" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="修改时间" prop="reviseTime">
								<el-date-picker v-model="formData.reviseTime" type="datetime" placeholder="修改时间" readonly style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="修改人" prop="reviser">
								<el-input type="text" v-model="formData.reviser" placeholder="修改人" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<!-- 按钮 -->
					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item>
<div class="form-submit">
								<el-button class="form-submit-btn" type="primary" @click="save('updateForm')">保存</el-button>
								<el-button class="form-submit-btn" type="primary" @click="saveAndSubmit('updateForm')">保存并提交</el-button>
								<el-button class="form-cancle-btn" @click="cancel()">取消</el-button>
							</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</template>
	</d2-container>
</template>
<script>
import { findProductCouponCp, saveProductCouponCp, saveAndSubmitPurchaseOrder } from '@api/coupon/productCouponCp'
import { findUpProductCouponList } from '@api/coupon/productCoupon'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'coupon-productCouponCpUpdate',
  data () {
    return {
      formData: {
        id: '',
        partnerId: '',
        partnerName: '',
        partnerCode: '',
        name: '',
        phone: '',
        productCouponId: '',
        productCouponName: '',
        couponAmount: '',
        grantNum: '',
        status: '0',
        deliverStatus: '0',
        remark: '',
        createTime: '',
        creator: '',
        reviseTime: '',
        reviser: ''
      },
      productCouponList: [],
      rules: {
        productCouponId: [{ required: true, message: '请选择消费券商品', trigger: 'blur' }],
        grantNum: [{ required: true, message: '请输入发放数量', trigger: 'blur' }, { type: 'number', message: '发放数量必须为数字值'}]
      },
	    isReturnList: false // 关闭页面是否返回列表
    }
  },
  created () {
  },
  mounted () {
    this.productCouponCpUpdateId = sessionStorage.getItem('productCouponCpUpdateId')
    if (this.productCouponCpUpdateId == null || this.productCouponCpUpdateId == undefined) {
      return
    }
    this.getProductCouponCp(this.productCouponCpUpdateId)
    this.getProductCouponList()
  },
  beforeDestroy () {
	  if (this.isReturnList) {
      // 跳转到列表页面
      this.$router.push({
		  path: 'coupon/productCouponCpList',
		  name: 'coupon-productCouponCpList',
		  params: ''
      })
	  }
  },
  watch: {},
  computed: {
    ...mapState('d2admin/page', ['opened', 'current'])
  },
  methods: {
    ...mapActions('d2admin/page', ['close']),
    getProductCouponCp (productCouponCpUpdateId) {
      findProductCouponCp({ id: productCouponCpUpdateId })
        .then(res => {
          if (res.code == '000000') {
            this.formData = res.data
          } else {
            this.$message({ message: '消费券合作加载失败，请重试!', type: 'error' })
          }
        })
        .catch(err => {
          console.log('err', err)
        })
    },
    getProductCouponList () {
      this.productCouponList = []
      findUpProductCouponList({ })
        .then(res => {
          if (res.code == '000000') {
            let list = res.data
            list.forEach(item => {
              this.productCouponList.push({
                id: item.id,
                productName: item.productName,
                couponDenomination: item.couponDenomination
              })
            })
          } else {
            this.$message({ message: '消费券商品加载失败，请重试!', type: 'error' })
          }
        })
        .catch(err => {
          console.log('err', err)
        })
    },
    selectProductCoupon () {
      for (let index in this.productCouponList) {
        if (this.productCouponList[index].id == this.formData.productCouponId) {
          this.formData.productCouponName = this.productCouponList[index].productName
          this.formData.couponAmount = this.productCouponList[index].couponDenomination
        }
      }
    },
    cancel () {
      // 关闭当前窗口
      let tagName = this.current
      this.close({ tagName })
    },
    save (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.formData.grantNum <= 0) {
            this.$message.warning('发放数量必须大于0')
            return false
          }
          if(this.formData.remark != '' && this.formData.remark.length > 128) {
            this.$message.warning('备注长度不能超过128字符')
            return false
          }
          this.loading = true
            saveProductCouponCp(this.formData)
              .then(res => {
                if (res.code == '000000') {
                  this.$message({ message: res.message, type: 'success' })
                  this.loading = false
				  this.isReturnList = true
                  this.cancel()
                } else {
                  this.$message({ message: res.message, type: 'error' })
                }
              })
              .catch(err => {
                console.log('err', err)
                this.loading = false
              })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    saveAndSubmit (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.formData.grantNum <= 0) {
            this.$message.warning('发放数量必须大于0')
            return false
          }
          if(this.formData.remark != '' && this.formData.remark.length > 128) {
            this.$message.warning('备注长度不能超过128字符')
            return false
          }
          this.loading = true
            saveAndSubmitPurchaseOrder(this.formData)
              .then(res => {
                if (res.code == '000000') {
                  this.$message({ message: res.message, type: 'success' })
                  this.loading = false
				  this.isReturnList = true
                  this.cancel()
                } else {
                  this.$message({ message: res.message, type: 'error' })
                }
              })
              .catch(err => {
                console.log('err', err)
                this.loading = false
              })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
	.table-header {
		display: flex;
	}
</style>
